<!--企业风险列表-->
<template>
  <view>
    <uni-row class="demo-uni-row">
      <uni-col :span="6" style="padding-left: 23px; padding-top: 18px">
        <view class="demo-uni-col dark">
          共计:<text>{{ qyfx.length }}</text
          >条
        </view>
      </uni-col>
      <uni-col :span="8" style="padding-top: 10px">
        <view class="demo-uni-col light">
          <view>
            <uni-data-select
              label="应用选择"
              emptyText="暂无数据"
              placeholder="请选择处理类型"
              v-model="value"
              :localdata="range"
              @change="change"
            >
            </uni-data-select>
          </view>
        </view>
      </uni-col>
    </uni-row>
    <!--每一项-->

    <view class="order" v-for="(item, index) in qyfxListData" :key="item.id">
      <view class="cu-list">
        <view class="cu-item cugrid">
          <view class="content">
            <view class="text-grey textgr">
              <text
                class="cuIcon-title text-orange text-fw"
                @click="gajin(item)"
                >{{ item.enterpriesName }}</text
              >
            </view>
            <view class="text-grey textgr">
              预警时间:
              <text class="cuIcon-title text-orange">{{parseInt( item.warnTime) | dateFormat }}</text>
            </view>
            <view class="text-grey textgr">
              风险等级:
              <text class="cuIcon-title text-orange">{{ risk_level[item.riskLevel]}}</text>
            </view>
            <view class="text-grey textgr">
              风险总值:
              <text class="cuIcon-title text-orange">{{ item.riskValue }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 		<view class="order">
			<view class="cu-list">
				<view class="cu-item cugrid">
					<view class="content ">
						<view class="text-grey textgr" v-for="(item,index) in cuIconList" :key="item.id">{{item.name}}:
							<text class="cuIcon-title text-orange ">{{item.text}}</text>
						</view>
					</view>
					<view>
						<view>
							<u-button type="error" shape="circle" size="small" :plain="true" text="未处理"></u-button>
						</view>
					</view>
				</view>
			</view>
		</view> -->
  </view>
</template>

<script>
import { qyfxList } from "@/api/sj/qyfx.js";
import { mapState } from 'vuex'//引入mapState
export default {
  data() {
    return {
			qyfx:[],
			num:"",
      qyfxListData: [],
      warnId: null,
      //  value: 0,
      value: "",
      range: [
        {
          value: 1,
          text: "低风险",
        },
        {
          value: 2,
          text: "一般风险",
        },
        {
          value: 3,
          text: "较大风险",
        },
				{
				  value: 4,
				  text: "重大风险",
				},
      ],
      datetimerange: [],
      start: Date.now() - 1000000000,
      end: Date.now() + 1000000000,

      show: false,
    };
  },
  watch: {},

  mounted() {
    this.getQyfxList();
  },
	computed: {
				...mapState({
					risk_level: state => state.sjzd.sjzdList.risk_level,
				})
			},
	

  methods: {
    change(e) {
     this.getQyfxList(e)
    },
    gajin(item) {
      this.warnId = item.id;
      uni.navigateTo({
				url:`/pages/work/enterpriserisklist/enterpriserisketails/index?id=${this.warnId}`
			}
      );
    },
		// 触底
		onReachBottom(){
			if(this.num < this.qyfx.length){
				this.num = this.num + 10
				this.qyfxListData.push(...this.qyfx.slice(this.num,this.num + 10))
			}
			
		}, 
    // 企业风险列表数据
    getQyfxList(e) {
			uni.showLoading({
				title: '加载中'
			});
      qyfxList(e)
        .then((result) => {
					uni.hideLoading();
          const data = result.data;
					this.qyfx = result.data
          this.qyfxListData = data.slice(0,9);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 16rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
  letter-spacing: 2rpx;
  box-shadow: 0px 3px 10px 0px rgba(148, 177, 188, 0.38);
}

.page {
  height: 100vh;
  width: 100vw;
}

.cu-list.menu-avatar > .cu-item {
  position: relative;
  display: flex;
  padding-right: 10rpx;
  height: 380rpx;
  background-color: #ffffff;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30rpx;
  border-radius: 30rpx;
}

.cu-list.menu-avatar > .cu-item[data-v-0b41208f] {
  position: relative;
  display: flex;
  padding-right: 10rpx;
  height: 380rpx;
  background-color: #ffffff;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30rpx;
  border-radius: 30rpx;
}

.cu-list.menu-avatar > .cu-item .content {
  position: absolute;
  left: 0px;
  width: calc(100% - 52px - 33px - 66px - 11px);
  line-height: 1.6em;
}

.text-grey,
.line-grey,
.lines-grey {
  color: #848484;
}

.text-orange,
.line-orange,
.lines-orange {
  color: #343434;
}

.cu-list > .cu-item {
  transition: all 0.6s ease-in-out 0s;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.textgr {
  line-height: 48rpx;
}

.cugrid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.example-body {
  background-color: #fff;
  padding: 10px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  margin: 20px 0 5px 0;
}

.data-pickerview {
  height: 400px;
  border: 1px #e5e5e5 solid;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

.u-form-item__body {
  display: flex;
  flex-direction: row;
  padding: 4px 0;
  border: 1px solid #e5e5e5;
}

.example-body[data-v-b41e3472] {
  background-color: #fff;
  padding: 22px 14px 18px 16px;
}

.text-fw {
  font-weight: 800;
}
</style>
